<template>
    <div class="care">
        <!-- <child @func="getMsgFormSon"></child> -->
        <div class="care_top">
             <div class="care_go_back" @click="back"></div>
             <div class="care_name"></div>
             <div class="care_all" @click="choose" v-text="text"></div> 
             <div class="wrap" v-if="cate">
                <div class="trile1"></div>
                <ul>
                    <li @click="typer(1,'全部')">全部</li>
                    <li @click="typer(4,'提现成功')">提现成功</li>
                    <li @click="typer(2,'提现中')">提现中</li>
                    <li @click="typer(3,'提现失败')">提现失败</li>
                </ul>    
            </div> 
        </div>
        <div class="care_menu">
            <div class="care_moth" @click="showPicker0">{{filter}}<span></span></div>
            <div class="care_money">
                <div class="withdraw">提现¥{{good.cash_amount}}</div>
                <div class="income">收入¥{{good.total_amount}}</div>
            </div>
        </div>
        <div class="care_list">
            <ul>
                <li v-for="(item, index) in goods" :key="index" @click="goPart(item.status,index)">
                    <div class="care_left">
                        <img :src="item.head_pic">
                    </div>
                    <div class="care_right">                       
                        <div class="care_info">
                            <div class="care_name" v-text="item.real_name"></div>
                            <div class="care_time">{{item.create_time}} <span :class="rule[item.status].class">{{rule[item.status].title}}</span></div>
                        </div>
                        <div :class="rule[item.status].type">{{rule[item.status].coin}}{{item.amount}}</div>
                    </div>
                </li>
                <div class="nohave" v-if="nohave">当前日期还没有提现记录哦！</div>
                <!-- <li>
                    <div class="care_left">
                        <img src="//img.alicdn.com/imgextra/i4/3217234153/O1CN01NAsxRm1gY7MmcupzR_!!3217234153.jpg">
                    </div>
                    <div class="care_right">                       
                        <div class="care_info">
                            <div class="care_name">美妆店铺旗舰店</div>
                            <div class="care_time">06-03 20:08 <span class="statec">提现成功</span></div>
                        </div>
                        <div class="care_num  cut">+1.99</div>
                    </div>
                </li>        
                 <li>
                    <div class="care_left">
                        <img src="//img.alicdn.com/imgextra/i4/3217234153/O1CN01NAsxRm1gY7MmcupzR_!!3217234153.jpg">
                    </div>
                    <div class="care_right">                       
                        <div class="care_info">
                            <div class="care_name">美妆店铺旗舰店</div>
                            <div class="care_time">06-03 20:08 <span class="stateb">提现失败</span></div>
                        </div>
                        <div class="care_num  add">+1.99</div>
                    </div>
                </li>                           -->
            </ul>
             <div v-if="load" class="loader">正在加载中...</div>  
             <div v-if="bottom" class="bottom">已经到底啦</div>  
        </div>
      <awesome-picker ref="picker0" :data="picker0.data" :textTitle="picker0.textTitle"  :anchor="picker0.anchor" @todo="msg1"  @confirm="handlePicker0Confirm"></awesome-picker>
      <awesome-picker ref="picker"  :textTitle="picker.textTitle" :type="time" @todo="msg2" @confirm="handlePickerConfirm"></awesome-picker>
      <div class="contain" v-if="contain" @click="close"></div>
    </div>
</template>
<script>
//import child  from  './vue-awesome-picker.vue'
const data1 = ['2016年', '2017年', '2018年', '2019年', '2020年', '2021年', '2022年', '2023年', '2024年', '2025年', '2026年', '2027年', '2028年', '2029年', '2030年']
const data2 = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
    export default {
        name: 'Care',
        data() {
            return {
                titleText: '',
                text:"全部",
                time:"date",
                disabled:'',
                filter:'本月',
                cate:false,
                contain:false,
                page:1,
                limit:10,
                token:"",
                good:"",
                goods:"",//数据
                minu:"",//列表
                kind:1,//提现情况
                type:2,//按月还是日查询
                load:false,
                bottom:false,
                nohave:false,
                picker0: {
                    anchor: [],
                    textTitle: '按月选择',
                    data: [data1, data2]
                },
                picker: {
                    anchor: [],
                    textTitle: '按日选择',
                },
                rule:[
                    {"type":'add',"class":"statea","title":"提现中","coin":"-"},
                    {"type":'add',"class":"statea","title":"提现中","coin":"-"},
                    {"type":'cut',"class":"stateb","title":"提现失败","coin":"+"},
                    {"type":'add',"class":"statec","title":"提现成功","coin":"-"},
                ]
            };
        },
        created(){
                document.title="提现明细";
                if (localStorage.token) {
                    this.token=localStorage.getItem('token');
                }else{
                    this.$router.push({path:'/login'}); 
                }
                var nowDate = new Date();
                let date = {
                    year: nowDate.getFullYear(),
                    month: nowDate.getMonth() + 1,
                }       
                this.minu = date.year + '-'  + date.month ;
                this.getData();
        },
        methods: {
            back(){
                this.$router.go(-1);
            },
            showPicker0 () {
                this.$refs.picker0.show()
            },
            //按月查询
            handlePicker0Confirm (v) {
                var year=v[0].value.substr(0,v[0].value.length-1);
                var month=v[1].value.substr(0,v[1].value.length-1);
                this.filter=year+'-'+month;   
                this.minu=year+'-'+month;
                this.type=2; 
                this.page=1;  
                this.load=false;
                this.bottom=false;
                this.nohave=false;
                this.getData();
            },
            showPicker() {
                this.$refs.picker.show();
                // var hdiv=document.getElementsByTagName('h4')[0];
                
                // hdiv.setAttribute("v-on:click","blurTodo");     
            },
            //按日查询
            handlePickerConfirm(data){
                var year=data[0].value.substr(0,data[0].value.length-1);
                var month=data[1].value.substr(0,data[1].value.length-1);
                var date=data[2].value.substr(0,data[2].value.length-1);
                this.filter=year+'-'+month+'-'+date;  
                this.minu=year+'-'+month+'-'+date;
                this.type=1;
                this.page=1;
                this.load=false;
                this.bottom=false;
                this.nohave=false;
                this.getData();
            },
            msg1(data){
            //    if(data){
                this.$refs.picker0.hide();
                this.$refs.picker.show();
                   
            //    }else{
            //        this.$refs.picker0.show();
            //        this.$refs.picker.hide();
            //    }
            },
            msg2(data){
                this.$refs.picker.hide();
                this.$refs.picker0.show();
                 
            },
            choose(){
                this.cate=true;
                this.contain=true;
            },
            close(){
                this.contain=false;
                this.cate=false;
            },
            typer(e,f){
                this.cate=false;
                this.contain=false;
                this.text=f;
                this.page=1;
                this.load=false;
                this.bottom=false;
                this.nohave=false;
                this.kind=e;
                this.getData();
            },
            scroll(goods) {
                let flag = false;
                window.onscroll = () => {
                    let top = document.documentElement.scrollTop || document.body.scrollTop; // 滚动条在Y轴上的滚动距离
                    let vh = document.compatMode == 'CSS1Compat' ? document.documentElement.clientHeight : document.body.clientHeight; // 浏览器视口的高度
                    let height = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight); // 文档的总高度
                    let bottomOfWindow =top + vh >= height;
                    if(bottomOfWindow&&flag==false){
                        flag=true;
                        this.page++;
                            var that = this;
                            that.load=true;
                            var params = {
                                    page: that.page,
                                    limit:that.limit,
                                    time:that.minu,
                                    status:that.kind,
                                    time_type:this.type,
                            }
                            this.$axios.get( //传参发起请求
                                '/v1/user/getCashList', {
                                    params,
                                    headers:{
                                        'Content-Type':'application/x-www-form-urlencoded;charset=UTF-8',
                                        'Authorization':"bearer "+this.token
                                    }
                                }
                            ).then(function (response) { //接口返回数据
                            var data=response.data.data.list;
                                if(data.length<=0){
                                    that.bottom=true;
                                    that.load=false;
                                }else{
                                    for(var i =0;i<data.length;i++){
                                        goods.push(data[i]);
                                    };
                                    that.load=false;
                                    flag=false;
                                }

                            }, response => {
                                console.log("error");
                            });
                        }
                }
            },    
            getData(){
                 this.$axios.get("/v1/user/getCashList",{
                    params:{
                        time:this.minu,
                        page:this.page,
                        limit:this.limit,
                        status:this.kind,
                        time_type:this.type,
                    },
                    headers:{
					  'Content-Type':'application/x-www-form-urlencoded;charset=UTF-8',
                      'Authorization':"bearer "+this.token
					}
                }).then(res => {
                    if(res.data.code==200){
                        var data=res.data.data;
                        this.good=data;
                        this.goods=data.list;
                     
                        if(data.list.length<=0){
                            this.nohave=true;
                        }
                        this.scroll(this.goods);
                    }else if(res.data.code==10000){
                         Toast(res.data.msg);
                         this.$router.push({path:'/login'});
                    }else{
                       Toast(res.data.msg);
                    }    
                   this.scroll(this.goods); 
                }, res => {
                    console.log("error");
                }); 
            },
            goPart(e,f){
                if(e==2){
                   this.$router.push({path:'/bill',query:{"remark":this.goods[f].remark,"amount":this.goods[f].amount,"helped":this.goods[f].helped,"real_name":this.goods[f].real_name,"head_pic":this.goods[f].head_pic,"id":this.goods[f].id}}); 
                }
            }
            

        },

        // components:{
        //     child,
        // },
    }
</script>
<style scoped>
.care_top{display: flex;flex-direction: row;justify-content: space-between;width:698px;margin:0 auto;height:70px;padding-top:30px;}
.care_top .care_go_back{width:48px;height:48px;background:url(/static/images/team_go_back.png) no-repeat center center;background-size:100% 100%;}
.care_top .care_name{font-size:34px;color:#333334;font-weight:600;}
.care_top .care_search{width:48px;height:48px;background:url(/static/images/care.png) no-repeat center center;background-size:100% 100%;}
.care_top .care_all{font-size:28px;color:#4A4A4A;line-height:48px;position:relative;}
.care_menu{height:200px;background:#F8F8F8;display: flex;justify-content: space-between;}
.care_menu .care_moth{padding:0 18px;height:56px;border-radius:30px;line-height:56px;background:#FFF;text-align: center;font-size:28px;color:#4A4A4A;margin-top:34px;margin-left:26px;}
.care_menu .care_moth span{width:28px;height:28px;display: inline-block;background:url(/static/images/now.png) no-repeat center center;background-size:100% 100%;margin-left:8px;}
.care_menu .care_money{color:#9B9B9B;font-size:28px;margin-right:26px;text-align: right;}
.care_menu .care_money .withdraw{line-height:46px;margin-top:18px;}
.care_list{width:100%;border-radius:80px 80px 0 0;margin-top:-80px;background:#FFF;}
.care_list li{display: flex;justify-content: space-between;width:698px;height:180px;margin:0 auto;line-height:180px;vertical-align: middle;}
.care_list li .care_left{width:80px;height:80px;}
.care_list li .care_left img{width:100%;border-radius:50%;vertical-align: middle;}
.care_list li .care_right{width:598px;display: flex;justify-content: space-between;border-bottom:2px solid #F2F2F2;}
.care_right .care_name{color:#333333;font-size:28px;font-weight:bold;}
.care_right .care_time{font-size:28px;color: #9B9B9B;}
.care_right .care_time span{font-size:24px;color:#FFF;padding:4px 16px;border-radius:36px 36px 36px 0px;margin-left:28px;}
.care_right .care_time .statea{background:#FE3B30;}
.care_right .care_time .stateb{background:#333334;}
.care_right .care_time .statec{background:#E4E4E4;}
.care_info{line-height:56px;margin-top:40px;}
.care_right .add{color:#FE3B30;font-size:40px;}
.care_right .cut{color:#89C149;font-size:40px;}
.wrap {
    position: absolute;
    background-color: #474747;
    width: 180px;
    border-radius:8px;
    z-index:99;
    right:24px;
    top:116px;
  }
  .trile1 {
    display: block;
    position: absolute;
    width: 0px;
    height: 0px;
    border: 12px solid transparent;
    border-bottom-color: #474747;
    top: -24px;
    left: 120px;
  }
.wrap ul{width:160px;margin:0 auto;} 
.wrap li{line-height:80px;font-size:28px;color:#FFF;border-bottom:2px solid #FFF;text-align: center;}
.wrap li:last-child{border-bottom:none;}
.contain{position: fixed;width:100%;height:100%;background:#989898;z-index:1;top: 0;left: 0; right: 0;bottom: 0;opacity:0.3;}
.loader{font-size:24px;line-height:80px;text-align: center;width:100%;}
.bottom{font-size:24px;line-height:80px;text-align: center;width:100%;}
.nohave{font-size:24px;line-height:80px;text-align: center;width:100%;padding-top:40px; }
</style>